<template>
    <span :class="[txtColor, notbold ? 'notBold' : '']" class="num-txt">
        {{ prefix }}<span v-if="!amin">{{ numStr }}</span>
        <span v-if="amin" class="d-flex">
            <CountUp :end-val="formaAminVal(numStr)" :decimal-places="fix"></CountUp>
        </span>{{ suffix }}
        <span v-if="isArrow && numStr != '-' && numStr != 0" class="iconfont icon-arrow_down"
            :class="{ up: num > 0 }"></span>
    </span>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { formatBigNumber, numberWithCommas } from "@/comm/format";
import CountUp from "vue-countup-v3";

//-0.0000002356
function formaAminVal(num: string | number, ischar: boolean = false): number | string {
    console.warn("ischar", num, ischar)
    if(num == "-"){
        num = "0"
    }
    console.warn("ischar", num, ischar)
    const num_ = String(num);
    const num_obj = Array.from(num_.matchAll(/[A-z]/g))[0];
    if (num_obj !== undefined) {
        if (ischar) {
            return num_obj[0];
        } else {
            return Number.parseFloat(num_.slice(0, num_obj.index));
        }
    }
    return num_;
}

const numStr = computed(() => {
    if (props.price) {
        const prev = props.num >= 0 ? "" : "-";
        const sum = Math.abs(props.num);
        let val: any = Math.abs(props.num);
        if (sum < 1) {
            // val = Math.abs(props.num);
            if (sum > 0.0001) {
                val = val.toFixed(4);
            } else if (sum > 0.000001) {
                val = val.toFixed(6);
            } else {
                if (props.num > 0) {
                    // return '<0.001';
                    return getZore(val);
                } else if (props.num == 0) {
                    return "0";
                } else {
                    // return ">-0.001";
                    return "-" + getZore(val);
                }
            }
        }
        if (sum > 1) {
            val = numberWithCommas(val);
        }
        return prev + val;
    }
    if (props.num == 0 && !props.origin) return "-";
    if (props.notformat) {
        // let t = Number(props.num.toFixed(2));
        return props.num;
        // return numberWithCommas(t);
    }
    return formatBigNumber(props.num, props.fix);
});

function getZore(val: number) {
    let t = val.toFixed(16).replace(/0+$/, "") + "000000000";
    return t.substring(0, 9);
}

const txtColor = computed(() => {
    if (props.isColor) {
        if (props.num == 0) {
            return "normal-color";
        }
        if (props.num < 0) {
            return "lose-color";
        }
        if (props.num > 0) {
            return "win-color";
        }
        return "lose-color";
    }
    return "";
});

const props = defineProps({
    num: {
        default: 0
    },
    isColor: {
        type: Boolean,
        default: false
    },
    isArrow: {
        type: Boolean,
        default: false
    },
    fix: {
        type: Number,
        default: 2
    },
    /**前面加字符串 */
    prefix: {
        type: String,
        default: ""
    },
    /**后面加字符串 */
    suffix: {
        type: String,
        default: ""
    },
    /**为0是否变成- */
    origin: {
        type: Boolean,
        default: false
    },
    /**是否不格式化为.00 */
    notformat: {
        type: Boolean,
        default: false
    },
    /**价格是否做小于0.01判读 */
    price: {
        type: Boolean,
        default: false
    },
    /**是否不加粗 */
    notbold: {
        type: Boolean,
        default: false
    },
    /**是否加动画 */
    amin: {
        type: Boolean,
        default: false
    }
});
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
